<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - Component</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-api mode-stable page-api-core/Component sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self"><span>服务提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self"><span>DI 提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 expanded selected ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter-io.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="api-core/Component"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><article><div class="breadcrumb-container"><div class="breadcrumb"><script type="application/ld+json">{
          "@context": "http://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            { "@type": "ListItem", "position": 1, "item": { "@id": "https://angular.cn//api", "name": "API" } },
            { "@type": "ListItem", "position": 2, "item": { "@id": "https://angular.cn/api/core", "name": "@angular/core" } },
            { "@type": "ListItem", "position": 3, "item": { "@id": "https://angular.cn/api/core/Component", "name": "Component" } }
          ]
        }</script><a href="/api">API</a> &gt; <a href="api/core">@angular/core</a></div><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L750-L752" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L750-L752" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div><header class="api-header"><h1 id="component">Component<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#component"><i class="material-icons">link</i></a></h1><label class="api-type-label decorator">decorator</label></header><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="说明"><a href="api/core/Component#description">说明</a></li><li class="h2 ng-star-inserted" title="选项"><a href="api/core/Component#options">选项</a></li><li class="h3 ng-star-inserted" title="changeDetection"><a href="api/core/Component#changedetection">changeDetection</a></li><li class="h3 secondary ng-star-inserted" title="viewProviders"><a href="api/core/Component#viewproviders">viewProviders</a></li><li class="h3 secondary ng-star-inserted" title="moduleId"><a href="api/core/Component#moduleid">moduleId</a></li><li class="h3 secondary ng-star-inserted" title="templateUrl"><a href="api/core/Component#templateurl">templateUrl</a></li><li class="h3 secondary ng-star-inserted" title="template"><a href="api/core/Component#template">template</a></li><li class="h3 secondary ng-star-inserted" title="styleUrls"><a href="api/core/Component#styleurls">styleUrls</a></li><li class="h3 secondary ng-star-inserted" title="styles"><a href="api/core/Component#styles">styles</a></li><li class="h3 secondary ng-star-inserted" title="animations"><a href="api/core/Component#animations">animations</a></li><li class="h3 secondary ng-star-inserted" title="encapsulation"><a href="api/core/Component#encapsulation">encapsulation</a></li><li class="h3 secondary ng-star-inserted" title="interpolation"><a href="api/core/Component#interpolation">interpolation</a></li><li class="h3 secondary ng-star-inserted" title="entryComponents"><a href="api/core/Component#entrycomponents">entryComponents</a></li><li class="h3 secondary ng-star-inserted" title="preserveWhitespaces"><a href="api/core/Component#preservewhitespaces">preserveWhitespaces</a></li><li class="h2 secondary ng-star-inserted" title="使用说明"><a href="api/core/Component#usage-notes">使用说明</a></li><li class="h3 secondary ng-star-inserted" title="设置组件的输入属性"><a href="api/core/Component#setting-component-inputs">设置组件的输入属性</a></li><li class="h3 secondary ng-star-inserted" title="设置组件的输出属性"><a href="api/core/Component#setting-component-outputs">设置组件的输出属性</a></li><li class="h3 secondary ng-star-inserted" title="使用视图提供商注入一个类"><a href="api/core/Component#injecting-a-class-with-a-view-provider">使用视图提供商注入一个类</a></li><li class="h3 secondary ng-star-inserted" title="Preserving whitespace"><a href="api/core/Component#preserving-whitespace">Preserving whitespace</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><div class="api-body"><section class="short-description"><p translation-result="on">一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。</p><p translation-origin="off">Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.</p><p><a href="api/core/Component#description">查看"说明"...</a></p></section><section class="decorator-overview"><table class="is-full-width list-table option-overview"><thead><tr><th>选项</th><th>说明</th></tr></thead><tbody><tr class="option"><td><a class="code-anchor" href="api/core/Component#changeDetection"> <code>changeDetection</code> </a></td><td><p translation-result="on">用于当前组件的变更检测策略。</p><p translation-origin="off">The change-detection strategy to use for this component.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#viewProviders"> <code>viewProviders</code> </a></td><td><p translation-result="on">定义一组可注入对象，它们在视图的各个子节点中可用。参见<a href="api/core/Component#injecting-a-class-with-a-view-provider">例子</a>。</p><p translation-origin="off">Defines the set of injectable objects that are visible to its view DOM children. See <a href="api/core/Component#injecting-a-class-with-a-view-provider">example</a>.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#moduleId"> <code>moduleId</code> </a></td><td><p translation-result="on">包含该组件的那个模块的 ID。该组件必须能解析模板和样式表中使用的相对 URL。 SystemJS 在每个模块中都导出了 <code>__moduleName</code> 变量。在 CommonJS 中，它可以设置为 <code>module.id</code>。</p><p translation-origin="off">The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the <code>__moduleName</code> variable within each module. In CommonJS, this can be set to <code>module.id</code>.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#templateUrl"> <code>templateUrl</code> </a></td><td><p translation-result="on">Angular 组件模板文件的 URL。如果提供了它，就不要再用 <code>template</code> 来提供内联模板了。</p><p translation-origin="off">The relative path or absolute URL of a template file for an Angular component. If provided, do not supply an inline template using <code>template</code>.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#template"> <code>template</code> </a></td><td><p translation-result="on">Angular 组件的内联模板。如果提供了它，就不要再用 <code><a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a></code> 提供模板了。</p><p translation-origin="off">An inline template for an Angular component. If provided, do not supply a template file using <code><a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a></code>.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#styleUrls"> <code>styleUrls</code> </a></td><td><p translation-result="on">一个或多个 URL，指向包含本组件 CSS 样式表的文件。</p><p translation-origin="off">One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#styles"> <code>styles</code> </a></td><td><p translation-result="on">本组件用到的一个或多个内联 CSS 样式。</p><p translation-origin="off">One or more inline CSS stylesheets to use in this component.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#animations"> <code>animations</code> </a></td><td><p translation-result="on">一个或多个动画 <code><a href="api/animations/trigger" class="code-anchor">trigger</a>()</code> 调用，包含一些 <code><a href="api/common/upgrade/$locationShim#state" class="code-anchor">state()</a></code> 和 <code><a href="api/animations/transition" class="code-anchor">transition</a>()</code> 定义。 参见<a href="/guide/animations">动画</a>和相关的 API 文档。</p><p translation-origin="off">One or more animation <code><a href="api/animations/trigger" class="code-anchor">trigger</a>()</code> calls, containing <code><a href="api/common/upgrade/$locationShim#state" class="code-anchor">state()</a></code> and <code><a href="api/animations/transition" class="code-anchor">transition</a>()</code> definitions. See the <a href="/guide/animations">Animations guide</a> and animations API documentation.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#encapsulation"> <code>encapsulation</code> </a></td><td><p translation-result="on">供模板和 CSS 样式使用的样式封装策略。取值为：</p><p translation-origin="off">An encapsulation policy for the template and CSS styles. One of:</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#interpolation"> <code>interpolation</code> </a></td><td><p translation-result="on">改写默认的插值表达式起止分界符（<code>{{</code> 和 <code>}}</code>）</p><p translation-origin="off">Overrides the default encapsulation start and end delimiters (<code>{{</code> and <code>}}</code>)</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#entryComponents"> <code>entryComponents</code> </a></td><td><p translation-result="on">一个组件的集合，它应该和当前组件一起编译。对于这里列出的每个组件，Angular 都会创建一个 <a href="api/core/ComponentFactory"><code>ComponentFactory</code></a>并保存进 <a href="api/core/ComponentFactoryResolver"><code>ComponentFactoryResolver</code></a>中。</p><p translation-origin="off">A set of components that should be compiled along with this component. For each component listed here, Angular creates a <a href="api/core/ComponentFactory"><code>ComponentFactory</code></a>and stores it in the <a href="api/core/ComponentFactoryResolver"><code>ComponentFactoryResolver</code></a>.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Component#preserveWhitespaces"> <code>preserveWhitespaces</code> </a></td><td><p translation-result="on">为 <code>true</code> 则保留，为 <code>false</code> 则从编译后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正则表达式中匹配 <code>\s</code> 的字符。默认为 <code>false</code>，除非通过编译器选项改写了它。</p><p translation-origin="off">True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the <code>\s</code> character class in JavaScript regular expressions. Default is false, unless overridden in compiler options.</p></td></tr></tbody></table><h3 class="no-toc" id="继承自-directive-装饰器">继承自 <a class="code-anchor" href="api/core/Directive">Directive</a> 装饰器<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#继承自-directive-装饰器"><i class="material-icons">link</i></a></h3><table class="is-full-width list-table option-overview"><thead><tr><th>选项</th><th>说明</th></tr></thead><tbody><tr class="option"><td><a class="code-anchor" href="api/core/Directive#selector"> <code>selector</code> </a></td><td><p translation-result="on">这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化。</p><p translation-origin="off">The CSS selector that identifies this directive in a template and triggers instantiation of the directive.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Directive#inputs"> <code>inputs</code> </a></td><td><p translation-result="on">列举某个指令的一组可供数据绑定的输入属性</p><p translation-origin="off">Enumerates the set of data-bound input properties for a directive</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Directive#outputs"> <code>outputs</code> </a></td><td><p translation-result="on">列举一组可供事件绑定的输出属性。</p><p translation-origin="off">Enumerates the set of event-bound output properties.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Directive#providers"> <code>providers</code> </a></td><td><p translation-result="on">一组依赖注入令牌，它允许 DI 系统为这个指令或组件提供依赖。</p><p translation-origin="off">Configures the <a href="guide/glossary#injector">injector</a> of this directive or component with a <a href="guide/glossary#di-token">token</a> that maps to a <a href="guide/glossary#provider">provider</a> of a dependency.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Directive#exportAs"> <code>exportAs</code> </a></td><td><p translation-result="on">定义一个名字，用于在模板中把该指令赋值给一个变量。</p><p translation-origin="off">Defines the name that can be used in the template to assign this directive to a variable.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Directive#queries"> <code>queries</code> </a></td><td><p translation-result="on">配置一些查询，它们将被注入到该指令中。</p><p translation-origin="off">Configures the queries that will be injected into the directive.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Directive#host"> <code>host</code> </a></td><td><p translation-result="on">使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。</p><p translation-origin="off">Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs.</p></td></tr><tr class="option"><td><a class="code-anchor" href="api/core/Directive#jit"> <code>jit</code> </a></td><td><p translation-result="on">如果为 true，则该指令/组件将会被 AOT 编译器忽略，始终使用 JIT 编译。</p><p translation-origin="off">If true, this directive/component will be skipped by the AOT compiler and so will always be compiled using JIT.</p></td></tr></tbody></table></section><section class="description"><h2 id="description">说明<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#description"><i class="material-icons">link</i></a></h2><p translation-result="on">组件是 Angular 应用中最基本的 UI 构造块。Angular 应用中包含一棵组件树。</p><p translation-origin="off">Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.</p><p translation-result="on">Angular 的组件是指令的一个子集，它总是有一个与之关联的模板。 和其它指令不同，模板中的每个元素只能具有一个组件实例。</p><p translation-origin="off">Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.</p><p translation-result="on">组件必须从属于某个 NgModule 才能被其它组件或应用使用。 要想让它成为某个 NgModule 中的一员，请把它列在 <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 元数据的 <code>declarations</code> 字段中。</p><p translation-origin="off">A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the <code>declarations</code> field of the <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> metadata.</p><p translation-result="on">注意，除了这些用来对指令进行配置的选项之外，你还可以通过实现生命周期钩子来控制组件的运行期行为。 要了解更多，参见 <a href="guide/lifecycle-hooks">生命周期钩子</a> 章。</p><p translation-origin="off">Note that, in addition to these options for configuring a directive, you can control a component's runtime behavior by implementing life-cycle hooks. For more information, see the <a href="guide/lifecycle-hooks">Lifecycle Hooks</a> guide.</p></section><section class="decorator-options"><h2 id="options">选项<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#options"><i class="material-icons">link</i></a></h2><a id="changeDetection"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="changedetection">changeDetection<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#changedetection"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L594-L614" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L594-L614" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">用于当前组件的变更检测策略。</p><p translation-origin="off">The change-detection strategy to use for this component.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#changeDetection" class="code-anchor">changeDetection</a>: <a href="api/core/ChangeDetectionStrategy" class="code-anchor">ChangeDetectionStrategy</a></div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#changeDetection" class="code-anchor"><span class="pln">changeDetection</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/core/ChangeDetectionStrategy" class="code-anchor"><span class="typ">ChangeDetectionStrategy</span></a></code>
    </pre></aio-code></code-example></td></tr><tr><td><p translation-result="on">当组件实例化之后，Angular 就会创建一个变更检测器，它负责传播组件各个绑定值的变化。 该策略是下列值之一：</p><p translation-origin="off">When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:</p><ul><li><p translation-result="on"><code><a href="api/core/ChangeDetectionStrategy" class="code-anchor">ChangeDetectionStrategy</a>#OnPush</code> 把策略设置为 <code><a href="" class="code-anchor">CheckOnce</a></code>（按需）。</p><p translation-origin="off"><code><a href="api/core/ChangeDetectionStrategy" class="code-anchor">ChangeDetectionStrategy</a>#OnPush</code> sets the strategy to <code><a href="" class="code-anchor">CheckOnce</a></code> (on demand).</p></li><li><p translation-result="on"><code><a href="api/core/ChangeDetectionStrategy" class="code-anchor">ChangeDetectionStrategy</a>#Default</code> 把策略设置为 <code><a href="" class="code-anchor">CheckAlways</a></code>。</p><p translation-origin="off"><code><a href="api/core/ChangeDetectionStrategy" class="code-anchor">ChangeDetectionStrategy</a>#Default</code> sets the strategy to <code><a href="" class="code-anchor">CheckAlways</a></code>.</p></li></ul></td></tr></tbody></table><a id="viewProviders"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="viewproviders">viewProviders<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#viewproviders"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L615-L623" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L615-L623" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">定义一组可注入对象，它们在视图的各个子节点中可用。参见<a href="api/core/Component#injecting-a-class-with-a-view-provider">例子</a>。</p><p translation-origin="off">Defines the set of injectable objects that are visible to its view DOM children. See <a href="api/core/Component#injecting-a-class-with-a-view-provider">example</a>.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#viewProviders" class="code-anchor">viewProviders</a>: <a href="api/core/Provider" class="code-anchor">Provider</a>[]</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#viewProviders" class="code-anchor"><span class="pln">viewProviders</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/core/Provider" class="code-anchor"><span class="typ">Provider</span></a><span class="pun">[]</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="moduleId"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="moduleid">moduleId<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#moduleid"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L624-L634" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L624-L634" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">包含该组件的那个模块的 ID。该组件必须能解析模板和样式表中使用的相对 URL。 SystemJS 在每个模块中都导出了 <code>__moduleName</code> 变量。在 CommonJS 中，它可以设置为 <code>module.id</code>。</p><p translation-origin="off">The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the <code>__moduleName</code> variable within each module. In CommonJS, this can be set to <code>module.id</code>.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#moduleId" class="code-anchor">moduleId</a>: string</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#moduleId" class="code-anchor"><span class="pln">moduleId</span></a><span class="pun">:</span><span class="pln"> string</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="templateUrl"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="templateurl">templateUrl<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#templateurl"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L635-L642" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L635-L642" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">Angular 组件模板文件的 URL。如果提供了它，就不要再用 <code>template</code> 来提供内联模板了。</p><p translation-origin="off">The relative path or absolute URL of a template file for an Angular component. If provided, do not supply an inline template using <code>template</code>.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: string</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> string</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="template"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="template">template<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#template"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L643-L650" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L643-L650" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">Angular 组件的内联模板。如果提供了它，就不要再用 <code><a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a></code> 提供模板了。</p><p translation-origin="off">An inline template for an Angular component. If provided, do not supply a template file using <code><a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a></code>.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none">template: string</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><span class="pln">template</span><span class="pun">:</span><span class="pln"> string</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="styleUrls"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="styleurls">styleUrls<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#styleurls"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L651-L658" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L651-L658" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">一个或多个 URL，指向包含本组件 CSS 样式表的文件。</p><p translation-origin="off">One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: string[]</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> string</span><span class="pun">[]</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="styles"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="styles">styles<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#styles"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L659-L666" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L659-L666" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">本组件用到的一个或多个内联 CSS 样式。</p><p translation-origin="off">One or more inline CSS stylesheets to use in this component.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none">styles: string[]</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><span class="pln">styles</span><span class="pun">:</span><span class="pln"> string</span><span class="pun">[]</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="animations"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="animations">animations<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#animations"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L667-L676" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L667-L676" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">一个或多个动画 <code><a href="api/animations/trigger" class="code-anchor">trigger</a>()</code> 调用，包含一些 <code><a href="api/common/upgrade/$locationShim#state" class="code-anchor">state()</a></code> 和 <code><a href="api/animations/transition" class="code-anchor">transition</a>()</code> 定义。 参见<a href="/guide/animations">动画</a>和相关的 API 文档。</p><p translation-origin="off">One or more animation <code><a href="api/animations/trigger" class="code-anchor">trigger</a>()</code> calls, containing <code><a href="api/common/upgrade/$locationShim#state" class="code-anchor">state()</a></code> and <code><a href="api/animations/transition" class="code-anchor">transition</a>()</code> definitions. See the <a href="/guide/animations">Animations guide</a> and animations API documentation.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none">animations: any[]</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><span class="pln">animations</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[]</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="encapsulation"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="encapsulation">encapsulation<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#encapsulation"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L677-L708" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L677-L708" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">供模板和 CSS 样式使用的样式封装策略。取值为：</p><p translation-origin="off">An encapsulation policy for the template and CSS styles. One of:</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none">encapsulation: <a href="api/core/ViewEncapsulation" class="code-anchor">ViewEncapsulation</a></div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><span class="pln">encapsulation</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/ViewEncapsulation" class="code-anchor"><span class="typ">ViewEncapsulation</span></a></code>
    </pre></aio-code></code-example></td></tr><tr><td><ul><li><p translation-result="on"><code><a href="api/core/ViewEncapsulation#Native" class="code-anchor">ViewEncapsulation.Native</a></code>：使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。</p><p translation-origin="off"><code><a href="api/core/ViewEncapsulation#Native" class="code-anchor">ViewEncapsulation.Native</a></code>: Deprecated. Use <code><a href="api/core/ViewEncapsulation#ShadowDom" class="code-anchor">ViewEncapsulation.ShadowDom</a></code> instead.</p></li><li><p translation-result="on"> <code><a href="api/core/ViewEncapsulation#Emulated" class="code-anchor">ViewEncapsulation.Emulated</a></code>：使用垫片（shimmed) CSS 来模拟原生行为。</p><p translation-origin="off"><code><a href="api/core/ViewEncapsulation#Emulated" class="code-anchor">ViewEncapsulation.Emulated</a></code>: Use shimmed CSS that emulates the native behavior.</p></li><li><p><code><a href="api/core/ViewEncapsulation#None" class="code-anchor">ViewEncapsulation.None</a></code>: Use global CSS without any encapsulation.</p></li><li><p translation-result="on"><code><a href="api/core/ViewEncapsulation#None" class="code-anchor">ViewEncapsulation.None</a></code>：使用全局 CSS，不做任何封装。</p><p translation-origin="off"><code><a href="api/core/ViewEncapsulation#ShadowDom" class="code-anchor">ViewEncapsulation.ShadowDom</a></code>: Use Shadow DOM v1 to encapsulate styles.</p></li></ul><p translation-result="on">如果没有提供，该值就会从 <code><a href="api/core/CompilerOptions" class="code-anchor">CompilerOptions</a></code> 中获取它。默认的编译器选项是 <code><a href="api/core/ViewEncapsulation#Emulated" class="code-anchor">ViewEncapsulation.Emulated</a></code>。</p><p translation-origin="off">If not supplied, the value is taken from <code><a href="api/core/CompilerOptions" class="code-anchor">CompilerOptions</a></code>. The default compiler option is <code><a href="api/core/ViewEncapsulation#Emulated" class="code-anchor">ViewEncapsulation.Emulated</a></code>.</p><p translation-result="on">如果该策略设置为 <code><a href="api/core/ViewEncapsulation#Emulated" class="code-anchor">ViewEncapsulation.Emulated</a></code>，并且该组件没有指定 <code>styles</code> 或 <code><a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a></code>，就会自动切换到 <code><a href="api/core/ViewEncapsulation#None" class="code-anchor">ViewEncapsulation.None</a></code>。</p><p translation-origin="off">If the policy is set to <code><a href="api/core/ViewEncapsulation#Emulated" class="code-anchor">ViewEncapsulation.Emulated</a></code> and the component has no <code>styles</code> or <code><a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a></code> specified, the policy is automatically switched to <code><a href="api/core/ViewEncapsulation#None" class="code-anchor">ViewEncapsulation.None</a></code>.</p></td></tr></tbody></table><a id="interpolation"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="interpolation">interpolation<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#interpolation"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L709-L715" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L709-L715" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">改写默认的插值表达式起止分界符（<code>{{</code> 和 <code>}}</code>）</p><p translation-origin="off">Overrides the default encapsulation start and end delimiters (<code>{{</code> and <code>}}</code>)</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#interpolation" class="code-anchor">interpolation</a>: [string, string]</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#interpolation" class="code-anchor"><span class="pln">interpolation</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">string</span><span class="pun">,</span><span class="pln"> string</span><span class="pun">]</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="entryComponents"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="entrycomponents">entryComponents<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#entrycomponents"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L716-L727" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L716-L727" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">一个组件的集合，它应该和当前组件一起编译。对于这里列出的每个组件，Angular 都会创建一个 <a href="api/core/ComponentFactory"><code>ComponentFactory</code></a>并保存进 <a href="api/core/ComponentFactoryResolver"><code>ComponentFactoryResolver</code></a>中。</p><p translation-origin="off">A set of components that should be compiled along with this component. For each component listed here, Angular creates a <a href="api/core/ComponentFactory"><code>ComponentFactory</code></a>and stores it in the <a href="api/core/ComponentFactoryResolver"><code>ComponentFactoryResolver</code></a>.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading deprecated-api-item" ng-version="9.0.0-rc.11"><div style="display:none">entryComponents: Array&lt;<a href="api/core/Type" class="code-anchor">Type</a>&lt;any&gt; | any[]&gt;</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><span class="pln">entryComponents</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Array</span><span class="pun">&lt;</span><a href="api/core/Type" class="code-anchor"><span class="typ">Type</span></a><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> any</span><span class="pun">[]&gt;</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table><a id="preserveWhitespaces"></a><table class="is-full-width option-table"><thead><tr><th><div class="with-github-links"><h3 id="preservewhitespaces">preserveWhitespaces<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#preservewhitespaces"><i class="material-icons">link</i></a></h3><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/packages/core/src/metadata/directives.ts?message=docs(core)%3A%20请简述你的修改...#L728-L738" aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a> <a href="https://github.com/angular/angular-cn/tree/9.0.0/packages/core/src/metadata/directives.ts#L728-L738" aria-label="查看源码" title="查看源码"><i class="material-icons" aria-hidden="true" role="img">code</i></a></div></div></th></tr></thead><tbody><tr><td><p translation-result="on">为 <code>true</code> 则保留，为 <code>false</code> 则从编译后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正则表达式中匹配 <code>\s</code> 的字符。默认为 <code>false</code>，除非通过编译器选项改写了它。</p><p translation-origin="off">True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the <code>\s</code> character class in JavaScript regular expressions. Default is false, unless overridden in compiler options.</p></td></tr><tr><td><code-example language="ts" hidecopy="true" class="no-box api-heading" ng-version="9.0.0-rc.11"><div style="display:none"><a href="api/core/Component#preserveWhitespaces" class="code-anchor">preserveWhitespaces</a>: boolean</div><aio-code><pre class="lang-ts prettyprint">      
      <code class="animated fadeIn"><a href="api/core/Component#preserveWhitespaces" class="code-anchor"><span class="pln">preserveWhitespaces</span></a><span class="pun">:</span><span class="pln"> boolean</span></code>
    </pre></aio-code></code-example></td></tr><tr><td></td></tr></tbody></table></section><section class="usage-notes"><h2 id="usage-notes">使用说明<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#usage-notes"><i class="material-icons">link</i></a></h2><h3 id="setting-component-inputs" translation-result="on">设置组件的输入属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#setting-component-inputs"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="setting-component-inputs">Setting component inputs<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#setting-component-inputs"><i class="material-icons">link</i></a></h3><p translation-result="on">下免得例子创建了一个带有两个数据绑定属性的组件，它是通过 <code>inputs</code> 值来指定的。</p><p translation-origin="off">The following example creates a component with two data-bound properties, specified by the <code>inputs</code> value.</p><code-example path="core/ts/metadata/directives.ts" region="component-input" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-bank-account', inputs: ['bankName', 'id: account-id'], template: ` Bank Name: {{ bankName }} Account Id: {{ id }} ` }) export class BankAccountComponent { bankName: string|null = null; id: string|null = null; // this property is not bound, and won't be automatically updated by Angular normalizedBankName: string|null = null; } @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-my-input', template: ` &lt;app-bank-account bankName="RBC" account-id="4747"&gt; &lt;/app-bank-account&gt; ` }) export class MyInputComponent { }</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-bank-account'</span><span class="pun">,</span><span class="pln">
  inputs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'bankName'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'id: account-id'</span><span class="pun">],</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    Bank Name: {{ bankName }}
    Account Id: {{ id }}
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">BankAccountComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  bankName</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">|</span><span class="kwd">null</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
  id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">|</span><span class="kwd">null</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">

  </span><span class="com">// this property is not bound, and won't be automatically updated by Angular</span><span class="pln">
  normalizedBankName</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">|</span><span class="kwd">null</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-my-input'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;app-bank-account
      bankName="RBC"
      account-id="4747"&gt;
    &lt;/app-bank-account&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">MyInputComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="setting-component-outputs" translation-result="on">设置组件的输出属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#setting-component-outputs"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="setting-component-outputs">Setting component outputs<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#setting-component-outputs"><i class="material-icons">link</i></a></h3><p translation-result="on">下面的例子展示了两个事件发生器，它们定时发出事件。一个每隔一秒发出一个输出事件，另一个则隔五秒。</p><p translation-origin="off">The following example shows two event emitters that emit on an interval. One emits an output every second, while the other emits every five seconds.</p><code-example path="core/ts/metadata/directives.ts" region="component-output-interval" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Directive" class="code-anchor">Directive</a>({selector: 'app-interval-dir', outputs: ['everySecond', 'fiveSecs: everyFiveSeconds']}) export class IntervalDirComponent { everySecond = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;(); fiveSecs = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;(); constructor() { setInterval(() =&gt; this.everySecond.emit('event'), 1000); setInterval(() =&gt; this.fiveSecs.emit('event'), 5000); } } @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-my-output', template: ` &lt;app-interval-dir (everySecond)="onEverySecond()" (everyFiveSeconds)="onEveryFiveSeconds()"&gt; &lt;/app-interval-dir&gt; ` }) export class MyOutputComponent { onEverySecond() { console.log('second'); } onEveryFiveSeconds() { console.log('five seconds'); } }</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">({</span><span class="pln">selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-interval-dir'</span><span class="pun">,</span><span class="pln"> outputs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'everySecond'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'fiveSecs: everyFiveSeconds'</span><span class="pun">]})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">IntervalDirComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  everySecond </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="str">&lt;string&gt;</span><span class="pun">();</span><span class="pln">
  fiveSecs </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="str">&lt;string&gt;</span><span class="pun">();</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    setInterval</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">everySecond</span><span class="pun">.</span><span class="pln">emit</span><span class="pun">(</span><span class="str">'event'</span><span class="pun">),</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">);</span><span class="pln">
    setInterval</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">fiveSecs</span><span class="pun">.</span><span class="pln">emit</span><span class="pun">(</span><span class="str">'event'</span><span class="pun">),</span><span class="pln"> </span><span class="lit">5000</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-my-output'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;app-interval-dir
      (everySecond)="onEverySecond()"
      (everyFiveSeconds)="onEveryFiveSeconds()"&gt;
    &lt;/app-interval-dir&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">MyOutputComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  onEverySecond</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'second'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  onEveryFiveSeconds</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'five seconds'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="injecting-a-class-with-a-view-provider" translation-result="on">使用视图提供商注入一个类<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#injecting-a-class-with-a-view-provider"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="injecting-a-class-with-a-view-provider">Injecting a class with a view provider<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#injecting-a-class-with-a-view-provider"><i class="material-icons">link</i></a></h3><p translation-result="on">下面的例子示范了如何在组件元数据中使用视图提供商来把一个类注入到组件中：</p><p translation-origin="off">The following simple example injects a class into a component using the view provider specified in component metadata:</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">class Greeter { greet(name:string) { return 'Hello ' + name + '!'; } } @<a href="api/core/Directive" class="code-anchor">Directive</a>({ selector: 'needs-greeter' }) class NeedsGreeter { greeter:Greeter; constructor(greeter:Greeter) { this.greeter = greeter; } } @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'greet', <a href="api/core/Component#viewProviders" class="code-anchor">viewProviders</a>: [ Greeter ], template: `&lt;needs-greeter&gt;&lt;/needs-greeter&gt;` }) class HelloWorld { }</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><span class="typ">Greeter</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
   greet</span><span class="pun">(</span><span class="pln">name</span><span class="pun">:</span><span class="pln">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
     </span><span class="kwd">return</span><span class="pln"> </span><span class="str">'Hello '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> name </span><span class="pun">+</span><span class="pln"> </span><span class="str">'!'</span><span class="pun">;</span><span class="pln">
   </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'needs-greeter'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">NeedsGreeter</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  greeter</span><span class="pun">:</span><span class="typ">Greeter</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">greeter</span><span class="pun">:</span><span class="typ">Greeter</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">greeter </span><span class="pun">=</span><span class="pln"> greeter</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'greet'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#viewProviders" class="code-anchor"><span class="pln">viewProviders</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Greeter</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  template</span><span class="pun">:</span><span class="pln"> </span><span class="pun">`&lt;</span><span class="pln">needs</span><span class="pun">-</span><span class="pln">greeter</span><span class="pun">&gt;&lt;/</span><span class="pln">needs</span><span class="pun">-</span><span class="pln">greeter</span><span class="pun">&gt;`</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HelloWorld</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="preserving-whitespace">Preserving whitespace<a title="Link to this heading" class="header-link" aria-hidden="true" href="api/core/Component#preserving-whitespace"><i class="material-icons">link</i></a></h3><p>Removing whitespace can greatly reduce AOT-generated code size and speed up view creation. As of Angular 6, the default for <code><a href="api/core/Component#preserveWhitespaces" class="code-anchor">preserveWhitespaces</a></code> is false (whitespace is removed). To change the default setting for all components in your application, set the <code><a href="api/core/Component#preserveWhitespaces" class="code-anchor">preserveWhitespaces</a></code> option of the AOT compiler.</p><p>By default, the AOT compiler removes whitespace characters as follows:</p><ul><li>Trims all whitespaces at the beginning and the end of a template.</li><li>Removes whitespace-only text nodes. For example,</li></ul><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button&gt;Action 1&lt;/button&gt; &lt;button&gt;Action 2&lt;/button&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button&gt;</span><span class="pln">Action 1</span><span class="tag">&lt;/button&gt;</span><span class="pln">  </span><span class="tag">&lt;button&gt;</span><span class="pln">Action 2</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p>becomes:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button&gt;Action 1&lt;/button&gt;&lt;button&gt;Action 2&lt;/button&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button&gt;</span><span class="pln">Action 1</span><span class="tag">&lt;/button&gt;&lt;button&gt;</span><span class="pln">Action 2</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><ul><li>Replaces a series of whitespace characters in text nodes with a single space. For example, <code>&lt;span&gt;\n some text\n&lt;/span&gt;</code> becomes <code>&lt;span&gt; some text &lt;/span&gt;</code>.</li><li>Does NOT alter text nodes inside HTML tags such as <code>&lt;pre&gt;</code> or <code>&lt;<a href="api/forms/DefaultValueAccessor" class="code-anchor">textarea</a>&gt;</code>, where whitespace characters are significant.</li></ul><p>Note that these transformations can influence DOM nodes layout, although impact should be minimal.</p><p>You can override the default behavior to preserve whitespace characters in certain fragments of a template. For example, you can exclude an entire DOM sub-tree by using the <code>ngPreserveWhitespaces</code> attribute:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ngPreserveWhitespaces&gt; whitespaces are preserved here &lt;span&gt; and here &lt;/span&gt; &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ngPreserveWhitespaces</span><span class="tag">&gt;</span><span class="pln">
    whitespaces are preserved here
    </span><span class="tag">&lt;span&gt;</span><span class="pln">    and here </span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p>You can force a single space to be preserved in a text node by using <code>&amp;ngsp;</code>, which is replaced with a space character by Angular's template compiler:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a&gt;Spaces&lt;/a&gt;&amp;ngsp;&lt;a&gt;between&lt;/a&gt;&amp;ngsp;&lt;a&gt;links.&lt;/a&gt; &lt;!--&gt;compiled to be equivalent to:&lt;/&gt; &lt;a&gt;Spaces&lt;/a&gt; &lt;a&gt;between&lt;/a&gt; &lt;a&gt;links.&lt;/a&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;a&gt;</span><span class="pln">Spaces</span><span class="tag">&lt;/a&gt;</span><span class="pln">&amp;ngsp;</span><span class="tag">&lt;a&gt;</span><span class="pln">between</span><span class="tag">&lt;/a&gt;</span><span class="pln">&amp;ngsp;</span><span class="tag">&lt;a&gt;</span><span class="pln">links.</span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="com">&lt;!--&gt;compiled to be equivalent to:&lt;/&gt;
 &lt;a&gt;Spaces&lt;/a&gt; &lt;a&gt;between&lt;/a&gt; &lt;a&gt;links.&lt;/a&gt;</span></code>
    </pre></aio-code></code-example><p>Note that sequences of <code>&amp;ngsp;</code> are still collapsed to just one space character when the <code><a href="api/core/Component#preserveWhitespaces" class="code-anchor">preserveWhitespaces</a></code> option is set to <code>false</code>.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a&gt;before&lt;/a&gt;&amp;ngsp;&amp;ngsp;&amp;ngsp;&lt;a&gt;after&lt;/a&gt; &lt;!--&gt;compiled to be equivalent to:&lt;/&gt; &lt;a&gt;Spaces&lt;/a&gt; &lt;a&gt;between&lt;/a&gt; &lt;a&gt;links.&lt;/a&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;a&gt;</span><span class="pln">before</span><span class="tag">&lt;/a&gt;</span><span class="pln">&amp;ngsp;&amp;ngsp;&amp;ngsp;</span><span class="tag">&lt;a&gt;</span><span class="pln">after</span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="com">&lt;!--&gt;compiled to be equivalent to:&lt;/&gt;
 &lt;a&gt;Spaces&lt;/a&gt; &lt;a&gt;between&lt;/a&gt; &lt;a&gt;links.&lt;/a&gt;</span></code>
    </pre></aio-code></code-example><p>To preserve sequences of whitespace characters, use the <code>ngPreserveWhitespaces</code> attribute.</p></section></div></article></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="Component"><a href="api/core/Component#component">Component</a></li><li class="h2 ng-star-inserted" title="说明"><a href="api/core/Component#description">说明</a></li><li class="h2 ng-star-inserted" title="选项"><a href="api/core/Component#options">选项</a></li><li class="h3 ng-star-inserted" title="changeDetection"><a href="api/core/Component#changedetection">changeDetection</a></li><li class="h3 ng-star-inserted" title="viewProviders"><a href="api/core/Component#viewproviders">viewProviders</a></li><li class="h3 ng-star-inserted" title="moduleId"><a href="api/core/Component#moduleid">moduleId</a></li><li class="h3 ng-star-inserted" title="templateUrl"><a href="api/core/Component#templateurl">templateUrl</a></li><li class="h3 ng-star-inserted" title="template"><a href="api/core/Component#template">template</a></li><li class="h3 ng-star-inserted" title="styleUrls"><a href="api/core/Component#styleurls">styleUrls</a></li><li class="h3 ng-star-inserted" title="styles"><a href="api/core/Component#styles">styles</a></li><li class="h3 ng-star-inserted" title="animations"><a href="api/core/Component#animations">animations</a></li><li class="h3 ng-star-inserted" title="encapsulation"><a href="api/core/Component#encapsulation">encapsulation</a></li><li class="h3 ng-star-inserted" title="interpolation"><a href="api/core/Component#interpolation">interpolation</a></li><li class="h3 ng-star-inserted" title="entryComponents"><a href="api/core/Component#entrycomponents">entryComponents</a></li><li class="h3 ng-star-inserted" title="preserveWhitespaces"><a href="api/core/Component#preservewhitespaces">preserveWhitespaces</a></li><li class="h2 ng-star-inserted" title="使用说明"><a href="api/core/Component#usage-notes">使用说明</a></li><li class="h3 ng-star-inserted" title="设置组件的输入属性"><a href="api/core/Component#setting-component-inputs">设置组件的输入属性</a></li><li class="h3 ng-star-inserted" title="设置组件的输出属性"><a href="api/core/Component#setting-component-outputs">设置组件的输出属性</a></li><li class="h3 ng-star-inserted" title="使用视图提供商注入一个类"><a href="api/core/Component#injecting-a-class-with-a-view-provider">使用视图提供商注入一个类</a></li><li class="h3 ng-star-inserted" title="Preserving whitespace"><a href="api/core/Component#preserving-whitespace">Preserving whitespace</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.79+sha.55f1ef01.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.ee607cf78010348c8334.js" type="module"></script><script src="runtime-es5.ee607cf78010348c8334.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.9cd62e243bd182514a19.js" type="module"></script><script src="main-es5.9cd62e243bd182514a19.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>